<template>
  <div class="list">
    <router-link class="item" v-for="(it,i) in list" :key="i" :to="{name:'detail',params:it}">
      <div class="img">
        <img :src="it.pic" alt />
      </div>
      <div class="text">
        <div class="title">商品：{{it.title}}</div>
        <div class="ys">已售：{{it.ys}}</div>
        <div class="dj">单价：{{it.dj}}</div>
        <div class="btn" @click.prevent="addlist(it)">
          <span v-if="it.count<1">加入购物车</span>
          <span v-else>已添加</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
import vm from "../../vm";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["list"])
  },
  methods: {
    ...mapActions(["request_data"]),
    ...mapMutations(["addlist"])
  },
  mounted() {
    this.request_data();
    vm.$on("oIndex", index => {
      /* 当传来下标为0时'价格升序↑'*/
      if (index === 0) {
        this.list.sort((a, b) => {
          return a.dj - b.dj;
        });
      }
      /* 当传来下标为1时'价格降序↓' */
      if (index === 1) {
        this.list.sort((a, b) => {
          return b.dj - a.dj;
        });
      }
      /* 当传来下标为2时'销量升序↑'*/
      if (index === 2) {
        this.list.sort((a, b) => {
          return a.ys - b.ys;
        });
      }
      /* 当传来下标为3时'销量降序↓'*/
      if (index === 3) {
        this.list.sort((a, b) => {
          return b.ys - a.ys;
        });
      }
    });
  }
};
</script>
<style lang="scss">
.item {
  width: 100%;
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #eee;
  .img {
    width: 100px;
  }
  .text {
    flex: 1;
    text-align: left;
    position: relative;
    .btn {
      position: absolute;
      bottom: 0;
      right: 0;
      span {
        background: red;
        color: #fff;
        padding: 3px 6px;
      }
    }
  }
}
</style>